<template>
    <div class="article-container">
        <van-nav-bar
        class="page-nav-bar"
            title="标题"
            left-arrow
            @click-left="this.$router.back()"
            fixed
            />
        <div class="main-wrap">
            <div v-if="loading" class="loading-wrap" >
                <van-loading color="#3296fa" vertical/>
            </div>

            <div v-else-if="article.title" class="article-detail">
                <h1 class="article-title">{{ article.title }}</h1>
                <van-cell class="user-info" center :border="false">

                    <template #icon>
                        <van-image round fit="cover" class="avatar"
                        :src="article.aut_photo"
                        />
                    </template>
                    <template #title>
                        <div class="user-name"> {{ article.aut_name }} </div>
                        <div class="publish-date">{{ article.pubdate }}</div>
                    </template>
                    <template #extra>
                      <follow-user
                      :isFollowed="article.is_followed"
                      :userId="article.aut_id"
                      @update-followed="article.is_followed"
                      class="follow-btn"/>
                        <!-- <van-button v-if="article.is_followed" :loading="followloading" class="follow-btn" type="info" size="small" @click="operateFollowed">已关注</van-button>
                        <van-button v-else class="follow-btn" :loading="followloading" type="info" size="small" color="#3296fa" @click="operateFollowed">+&nbsp;关注</van-button> -->

                      </template>
                </van-cell>
                <div class="article-content markdown-body"
                v-html="article.content"
                ref="article-contentRef"
                ></div>
                <van-divider>正文结束</van-divider>
                <CommentList 
                  :article-id="article.art_id" 
                  :list="commentList"
                  @reply-click="onReplayClick"
                  @load-success="commentTotalCount=$event.total_count" />

                <!-- 文章底部 -->
                <div class="article-bottom">
                  <van-button class="comment-btn" type="defalt" round size="small" @click="isPostShow=true">写评论</van-button>
                  <!-- <van-icon name="comment-o"  info="123" color="#777"/> -->
                  <van-icon name="comment-o" :badge="commentTotalCount" />

                  <!-- <van-icon name="star-o" color="#777" /> -->
                  <!-- 张亚 这里的v-model不仅会存在 Missing required prop: "value" 的警告，而且input事件回调也没有触发 -->
                  <!-- <CollectArticle class="btn-item" v-model="article.is_collected" :artId="article.art_id" /> -->
                  <CollectArticle class="btn-item" :value="article.is_collected" :artId="article.art_id"
                  @input="article.is_collected=!article.is_collected" />

                  <!-- <van-icon name="good-job-o" color="#777"/> -->
                  <LikeArticle class="btn-item" :value="article.attitude" :artId="article.art_id"
                  @input="attitudeMethod" />

                  <van-icon name="share" color="#777"/>
                </div>
                <van-popup v-model:show="isPostShow" position="bottom">
                  <CommentPost :target="article.art_id" @post-success="onPostSuccess"/>
                </van-popup>
                
            </div>
            

            <!-- 加载失败 404 -->
            <div v-else-if="errStatus === 404" class="error-warp">
                <van-icon name="failure" />
                <p class="text">该资源不存在或已删除</p>
            </div>
             <!-- 加载失败 404 -->

             <!-- 其它未知错误 -->
             <div v-else class="error-warp">
                <van-icon name="failure" />
                <p class="text">加载失败,点击重试</p>
                <van-button class="retry-btn" @click="loadArticelDetail">点击重试</van-button>
            </div>

        </div>
        <!-- 回复评论 -->
        <van-popup v-model:show="isReplyShow" position="bottom" :style="{ height: '100%' }" >
            <CommentReply v-if="isReplyShow" :comment="currentComment" @close="isReplyShow=false"/>
        </van-popup>

    </div>
</template>
<script>

import { getArticleDetail } from '@/apis/article'
import { showImagePreview } from 'vant'
import FollowUser from '@/components/follow-user'
import CollectArticle from '@/components/article-collect'
import LikeArticle from '@/components/article-like'
import CommentList from '@/views/article/components/comment-list.vue'
import CommentPost from '@/views/article/components/comment-post.vue'
import CommentReply from './components/comment-reply.vue'
export default {
    props: {
        articleId: {
            type: [Number, String],
            required: true
        }
    },
    components: {
      FollowUser,
      CollectArticle,
      LikeArticle,
      CommentList,
      CommentPost,
      CommentReply
    },
    provide: function() {
      return {
        articleId:this.articleId
      }
    },
    data () {
        return {
            article: {},
            loading: true,
            errStatus: 0,
            followloading: false,
            commentTotalCount: 0,
            isPostShow: false,
            commentList: [],
            isReplyShow:false,
            currentComment:{}
        }
    },
    created () {
        this.loadArticelDetail()
    },
    methods: {
        async loadArticelDetail () {
            this.loading = true
            try {
                const { data: res } = await getArticleDetail(this.articleId)
                this.article = res.data

                setTimeout(() => {
                  console.log(this.$refs['article-contentRef'])
                  this.previewImage()
                }, 0)

                // this.loading = false
            } catch (error) {
                if (error.response && error.response.status === 404) {
                    this.errStatus = 404
                }
                console.log(error.response)
            }
            this.loading = false
        },
        previewImage () {
          const articleContentHtml = this.$refs['article-contentRef']
          const imgs = articleContentHtml.querySelectorAll('img')
          const images = []
          imgs.forEach((img, i) => {
            images.push(img.src)
            // 这里我写成了onClick 导致一直出不来点击事件 ，要注意onclick和onClick的却别
            img.onclick = () => {
              showImagePreview({
                images,
                startPosition: i
              })
            }
          })
        },
        commentTotalCountFn (e) {
          console.log('接收', this.$event, e)
        },
        attitudeMethod(e) {
          console.log('接收2', e)
          this.article.attitude = e
        },
        onPostSuccess(data) {
          this.isPostShow = false
          this.commentList.unshift(data.new_obj)

        },
        onReplayClick(comment) {
          this.currentComment = comment
          this.isReplyShow = true
        }

    }
}
</script>
<style lang="less" scoped>
@import url('./github-markdown.css');
.article-container {
  .main-wrap {
    position: fixed;
    left: 0;
    right: 0;
    top: 46px;
    bottom: 44px;
    overflow-y: scroll;
    background-color: #fff;
  }
  .article-detail {
    .article-title {
      font-size: 20px;
      padding: 25px 16px;
      margin: 0;
      color: #3a3a3a;
    }

    .user-info {
      padding: 0 16px;
      .avatar {
        width: 35px;
        height: 35px;
        margin-right: 8px;
      }
      .van-cell__label {
        margin-top: 0;
      }
      .user-name {
        font-size: 12px;
        color: #3a3a3a;
      }
      .publish-date {
        font-size: 11px;
        color: #b7b7b7;
      }
      .follow-btn {
        width: 85px;
        height: 29px;
        border: 1px solid #ccc;
      }
    }

    .article-content {
      padding: 27px 16px;
      :deep(p) {
        text-align: justify;
      }
    }
  }

  .loading-wrap {
    padding: 100px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
  }

  .error-wrap {
    padding: 100px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    .van-icon {
      font-size: 61px;
      color: #b4b4b4;
    }
    .text {
      font-size: 15px;
      color: #666666;
      margin: 16px 0 23px;
    }
    .retry-btn {
      width: 140px;
      height: 35px;
      line-height: 35px;
      border: 1px solid #c3c3c3;
      font-size: 15px;
      color: #666666;
    }
  }

  .article-bottom {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    box-sizing: border-box;
    height: 44px;
    border-top: 1px solid #d8d8d8;
    background-color: #fff;
    .comment-btn {
      width: 141px;
      height: 23px;
      border: 1px solid #eeeeee;
      font-size: 15px;
      line-height: 23px;
      color: #a7a7a7;
    }
    .van-icon {
      font-size: 20px;
      .van-info {
        font-size: 8px;
        background-color: #e22829;
      }
    }
  }
}

</style>